{% extends '_admin.html' %}
{% import 'public.html' as public %}


{% block main_contain %}
<div class="row" id="ServerSetting">
    <div class="col-lg-6">
        <div class="card card-primary">
            <div class="card-header">
              <h3 class="card-title">服務設置</h3>
            </div>
            <!-- /.card-header -->
            <!-- form start -->
            <form class="form-horizontal" id="ModifyForm">
              <div class="card-body">
                <div v-for="(val, key) in ModifyData" class="form-group row" style="font-size: large;">
                    <label class="col-sm-3 col-form-label text-center">{[ ColumnName[key] ]}：</label>
                    <div class="col-sm-9">
                      <input v-model="ModifyData[key]" type="text" class="form-control" :name="key" 
                      :readonly="['AppID','Version'].includes(key)?'readonly':false">
                    </div>
                </div>
              </div>
              <!-- /.card-body -->
              <div class="card-footer text-center">
                <button type="submit" class="btn btn-info">保存設定</button>
              </div>
              <!-- /.card-footer -->
            </form>
          </div>
    </div>
</div>
{% endblock %}


{% block scripts %}
{{ super() }}
<script>
    // 系统参数
    var ServerSetting = new Vue({
        el: '#ServerSetting',
        delimiters: ['{[', ']}'],
        data: {
          ModifyData: {
            AppID: '',
            Version: '',
            AppName: '',
            Brand: '',
            Company: '',
            Address: '',
            Phone: '',
            Website: '',
          },
          ColumnName: JSON.parse('{{ ColumnNameJSON|safe }}'),
        },
        methods:{
            // 刷新设置
            refresh_settings(){
                let setting = JSON.parse('{{ SettingFormData|safe }}')
                for(key in this.ModifyData){if(setting.hasOwnProperty(key)){this.ModifyData[key]=setting[key]}}
            },
            // 提交表单
            commit_settings(){
                axios.post("{{ url_for('server.setting') }}", {Modify: this.ModifyData})
                .then(response => {
                    if(response.status==200){
                        let ret = response.data
                        AppMessage.fire({icon: ret.icon, text: ret.text})
                        if(ret.icon=='success'){setTimeout("window.location.reload()", 2000)}
                    }else{AppMessage.fire({icon: 'error', text: '操作錯誤，請聯係管理員'})}
                })
                .catch(function (error) {alert(error)})
            }
        },
        mounted: function(){
            // 校验
            $('#ModifyForm').validate({
                rules: {
                  AppName: {required: true},
                  Brand: {required: true},
                  Company: {required: true},
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.col-sm-8').append(error);
                },
                highlight: function (element, errorClass, validClass) {$(element).addClass('is-invalid')},
                unhighlight: function (element, errorClass, validClass) {$(element).removeClass('is-invalid')},
                // 提交
                submitHandler: function (){
                  ServerSetting.commit_settings()
                },
            });
        }
    });
    // 更新
    ServerSetting.refresh_settings()
    // 字体
    $("form").find("input").css("font-size", "larger")
</script>
{% endblock %}


